<template>
	<div class="goods-xs">
		<div class="img-box-xs" @click="jump">
			<img v-bind:src="goods.imgUrl"/>
			<br />
			<span>{{goods.desc}}</span>
		</div>
		<div class="goods-info-xs">
			<!--<progress v-bind:max="goods.target" v-bind:value="goods.sold"></progress>-->
			<iprogress v-bind:sold="goods.sold" v-bind:target="goods.target"></iprogress>
			<span class="price-xs">{{goods.price}}</span>
			<span class="target-xs">目标:{{goods.target}}</span>
			<span class="sold-xs">已售:{{goods.sold}}</span>
		</div>
	</div>
</template>

<script>
	import iprogress from './iprogress.vue'
	import router from '../router'
	export default {
		components:{
			iprogress,
		},
		data() {
			return {
				goods:{
					imgUrl: 'http://static.udz.com/uploads/2016/11/18/8215814922773884.png.360.png',
					desc: '生活大爆炸”看剧必备款 定制卫衣 特惠包邮',
					price: "￥59",
					sold: 550,
					target: 600,
				}
			}
		},
		methods:{
			jump: function(){
				setTimeout(function(){
					bus.$emit('goodsId', 123456);
				}, 100);
				router.push("detail");
			}
		},
	}
		
	
</script>

<style scoped lang="less" rel="stylesheet/less">
	.goods-xs{
		float: left;
		margin-top: 20px;
		border-left: 1px solid rgb(238, 238, 238);
		box-sizing: border-box;
		font-family: "微软雅黑";
		font-size: 0.75rem;
		width: 240px;
		height: 220px;
		padding: 5px 10px 0 10px;
		.img-box-xs{
			cursor: pointer; 
			width: 100%;
			/*height: 185px;*/
			text-align: center;
			/*padding: 5px 20px 0 20px;*/
			img{
				width: 150px;
				height: 150px;
			}
			span{
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.goods-info-xs{
			overflow: hidden;
			/*margin-top: 5px;*/
			
			span{
				margin-top: 5px;
				float: right;
				margin-left: 5px;
				font-size: 0.75rem;
			}
			.price-xs{
				color: red;
				float: left;
				margin-left: 0;
			}
			.target-xs{
				color: gray;
			}
		}		
	}
</style>